<template>
	<!-- 管理员头部组件 -->
	<view class="administrators-navBar">
		<view class="navBox" :style='"top:"+navHeight+"rpx;"'>
			<view class="icon iconfont icon-arrow-left" @tap="revert"></view>
			<view class="navbarTitle">{{titleText}}</view>
			<view></view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			titleText:String
		},
		data() {
			return {
				navHeight:0,//微信小程序导航栏高度
			}
		},
		mounted() {
			this.getsystemInfo()
		},
		methods: {
			revert(){//返回上一页
				uni.navigateBack()
			},
			getsystemInfo() { //获取当前屏幕信息
				// 设备系统信息
				let sysInfo = uni.getSystemInfoSync()
				// console.log(sysInfo)
				// 机型适配比例系数
				let scaleFactor = 750 / sysInfo.windowWidth
				// 当前机型屏幕高度
				let windowHeight = sysInfo.windowHeight * scaleFactor
				// 当前机型屏幕宽度
				let windowWidth = sysInfo.windowWidth * scaleFactor
				// 状态栏高度
				let statusBarHeight = (sysInfo.statusBarHeight) * scaleFactor
				// 导航栏高度(ps:只针对微信小程序有效)
				// let navHeight = 0
				// 微信小程序头部胶囊信息
				// #ifdef MP-WEIXIN
				const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
				// 胶囊高度
				let menuButtonHeight = menuButtonInfo.height * scaleFactor
				// 胶囊宽度
				let menuButtonWidth = menuButtonInfo.width * scaleFactor
				// 胶囊上边界的坐标
				let menuButtonTop = menuButtonInfo.top * scaleFactor
				// 胶囊右边界的坐标
				let menuButtonRight = menuButtonInfo.right * scaleFactor
				// 胶囊下边界的坐标
				let menuButtonBottom = menuButtonInfo.bottom * scaleFactor
				// 胶囊左边界的坐标
				let menuButtonLeft = menuButtonInfo.left * scaleFactor
				// 微信小程序：导航栏高度 = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
				this.navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2
				// console.log(this.navHeight)
				this.navHeight = this.navHeight - 27
				// this.headerHeight = this.navHeight + 25
				// // #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.administrators-navBar {
		background: #fff;
		z-index: 99999999;
		// padding: 0 40rpx;
		box-sizing: border-box;
		position: fixed;
		// border: 1px solid #f00;
		height: 150rpx;
		width: 100%;
		// position: relative;
		.navBox{
			padding: 0 10rpx;
			position: absolute;
			box-sizing: border-box;
			width: 100%;
			// border: 1px solid #000;
			display: flex;
			align-items: center;
			// justify-content: space-between;
			.icon-arrow-left{
				width: 33%;
				// border: 1px solid #f0f;
				font-size: 50rpx;
			}
			.navbarTitle{
				// border: 1px solid #00f;
				font-size: 32rpx;
				width: 33%;
				text-align: center;
			}
		}
	}
</style>